<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>樊慧玲的计算器</title>
<style>

/* 计算器容器样式 */  
.calculator_fhl {    
    width: 300px;         
    height: 500px;          
    background-color: black;  
    display: flex;           
    flex-direction: column; 
    align-items: right;    
    justify-content: space-between;
    padding: 10px;          
    box-sizing: border-box;   
  }  
    

  .display-panel-fhl {    
    /*overflow: hidden;*/
    height: 150px;                
    line-height: 150px;        
    font-size: 30px;             
    color: white;                 
    text-align: right;              
    padding: 0 10px;              
    box-sizing: border-box;        
    background-color: rgba(0, 0, 0, 0.5); 
  }  
    
  
  .button-panel-fhl {    
    display: grid;                 
    grid-template-columns: repeat(4, auto); 
    grid-gap: 15px;                  
    row-gap: 15px;                  
  }  
    

  .button {    
    width: 50px;                   
    height: 50px;                
    border: none;                  
    border-radius: 50%;           
    color: white;                  
    font-size: 20px;                
    display: flex;                
    align-items: center;            
    justify-content: center;        
    cursor: pointer;                
    background-color: #808080;      
  }  
    

  .button.orange {    
    background-color: orange;       
  }  
    
  /* 按钮被点击时的样式 */  
  .button:active {    
    filter: brightness(1.2);        
  }  
    
  .button.special {    
    border-radius: 5px;             
  }  

 
  .button-panel-fhl > button:nth-child(-n+3) {    
    background-color: rgb(169, 169, 169);
    border-radius: 50%;               
  }  
 
  .button-panel-fhl > button:nth-child(4n) {    
    background-color: orange;        
  }  
    
   
  .button-panel-fhl > button:nth-last-child(3) {  
    border-radius: 30px; 
    grid-column: span 2; 
    width: 120px
  }

</style>
</head>
<body >
    <div class="calculator_fhl">  
        <div class="display-panel-fhl" id="display">0</div>  
        <div class="button-panel-fhl">   
          <button class="button" onclick="clearDisplay()">AC</button>  
          <button class="button" onclick="eliminate()">Back</button>  
          <button class="button" onclick="signSwitch()">+/-</button> 
          <button class="button " onclick="appendOperator('/')">/</button>

          <button class="button " onclick="appendNumber('7')">7</button>
          <button class="button " onclick="appendNumber('8')">8</button> 
          <button class="button " onclick="appendNumber('9')">9</button>
          <button class="button " onclick="appendOperator('*')">*</button> 

          <button class="button " onclick="appendNumber('4')">4</button>
          <button class="button " onclick="appendNumber('5')">5</button>
          <button class="button " onclick="appendNumber('6')">6</button>
          <button class="button " onclick="appendOperator('-')">-</button>

          <button class="button " onclick="appendNumber('1')">1</button>
          <button class="button " onclick="appendNumber('2')">2</button>
          <button class="button " onclick="appendNumber('3')">3</button>
          <button class="button " onclick="appendOperator('+')">+</button>

          <button class="button " onclick="appendNumber('0')">0</button>
          <button class="button " onclick="ponit('.')">.</button>
          <button class="button " onclick="calculateResult('=')">=</button>  
        </div>  
      </div>  
      
  </div>  
</div>  
<script>
     display = document.getElementById('display');
    var currentInput = '';
    var operator = null;

    function appendNumber(number) {
        currentInput += number;
        display.value = currentInput;
    }

    function appendOperator(op) {
        if (operator !== null) {
            calculateResult();
        }
        operator = op;
        currentInput += op;
        display.value = currentInput;
    }

    function clearDisplay() {
        currentInput = '';
        operator = null;
        display.value = '';
    }

    function calculateResult() {
        if (operator === null) {
            return;
        }
        const operands = currentInput.split(operator);
        const leftOperand = parseFloat(operands[0]);
        const rightOperand = parseFloat(operands[1]);
        let result;

        switch (operator) {
            case '+':
                result = leftOperand + rightOperand;
                break;
            case '-':
                result = leftOperand - rightOperand;
                break;
            case '*':
                result = leftOperand * rightOperand;
                break;
            case '/':
                result = leftOperand / rightOperand;
                break;
        }

        currentInput = result.toString();
        operator = null;
        display.value = currentInput;
    }
</script> 
</body>  
</html>